
* {
    padding: 0;
    margin: 0;
}

/* 手机样式 */
.div1 {
    width: 326px;
    height: 732px;
    background: whitesmoke;
    border: 4px solid black;
    border-radius: 36px;
    margin: 100px auto;
}

/* 聊天部分 */
.div2 {
    width: 326px;
    height: 480px;
    border-bottom: 2px solid gray;
    margin: 0;
    padding: 0;
}

/* 状态栏 */
.top {
    width: 326px;
    height: 25px;
}

/* 摄像头 */
.holl {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: 5px auto;
    background: rgb(23, 23, 23);
}

/* 联系人信息 */
.more {
    width: 326px;
    height: 50px;
    border-bottom: 2px solid whitesmoke;
}

/* 用户信息 */
.user {
    width: 326px;
    text-align: center;
    margin-top: 5px;
}

/* 图片格式化 */
.user>img {
    width: 20px;
    height: 20px;
}

/* 返回 */
.re {
    margin-left: 10px;
    float: left;
}

/* 联系人信息 */
.name {
    text-align: center;
    width: 266px;
    float: left;
}

/* 更多 */
.point {
    margin-right: 10px;
    float: right;
}

/* 聊天框 */
.div4 {
    width: 316px;
    height: 430px;
    margin: auto;
}

/* 信息时间 */
.time {
    width: 316px;
    height: 25px;
    margin: auto;
    text-align: center;
}

/* 格式化数字 */
p {
    margin-top: 8px;
    font-size: 10px;
    color: grey;
    font-size: 10px;
}

/* 发送信息 */
.send {
    height: 88px;
}

/* 对方头像 */
.send>.i {
    margin-left: 8px;
    width: 42px;
    height: 42px;
    border-radius: 5px;
}

/* 对方消息 */
.send>xiaoxi {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    margin-left: 3px;
}

/* 格式化reply */
.reply {
    height: 88px;
}

/* 我方头像 */
.reply>.i {
    float: right;
    margin-right: 8px;
    width: 42px;
    height: 42px;
    border-radius: 5px;
}

/* 格式化信息 */
.reply>span {
    float: right;
    background: greenyellow;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    margin-right: 8px;
}



/* 加号功能 */
.div3 {
    width: 326px;
    height: 252px;
    margin: 0;
    padding: 0;
    background: rgb(240, 240, 240);
}

/* 输入框 */
.div5 {
    margin-top: -46px;
    /* 修改这行的长度，为后续的发送按钮显示做准备 */
    width: 380px;
    height: 46px;
    overflow: hidden;
}

/* 左边输入语音 */
.i1 {
    float: left;
    width: 24px;
    height: 24px;
    margin: 10px 0 10px 9px;
}

/* 输入框 */
.i3 {
    outline: none;
    border: 0;
    border-radius: 5px;
    float: left;
    margin: 8px 0 8px 9px;
    width: 200px;
    height: 28px;
    /* 修改光标的颜色 */
    caret-color: green;
    transition: all .4s;
}

/* emjoy的位置 */
.i4 {
    float: left;
    margin: 8px 0 8px 9px;
    width: 28px;
    height: 28px;
}

/* 叉掉 */
.i2 {
    display: block;
    float: left;
    width: 22px;
    height: 22px;
    margin: 12px 10px 10px 9px;
}

/* 发送按钮 */
.i5 {
    display: block;
    float: left;
    width: 52px;
    height: 28px;
    border: 0;
    border-radius: 5px;
    background: greenyellow;
    margin: 8px 0 10px 9px;
}

/* 底部功能按钮 */
ul {
    width: 326px;
    height: 116px;
    text-align: center;
    margin-top: 5px;
}

li {
    display: inline-block;
    width: 58px;
    height: 58px;
    list-style: none;
    border-radius: 10px;
    background: white;
    margin-left: 10px;
}

li>img {
    width: 38px;
    height: 38px;
    padding-top: 10px;
    text-align: center;
}

.ul1>li {
    margin-top: 20px;
}


